<template>
  <div class="home h-100">
    <div class="header">
      <header-m @searchClick="headerClick" @rightClick="headerClick"></header-m>
      <m-nav :list="nav"></m-nav>
    </div>
    <div class="header-h"></div>
    <scroll
        :data="data"
        :pullDownRefresh="pullDownRefresh"
        :pullUpLoad="pullUpLoad"
        @pullingUp="loadMore"
        @pullingDown='loadTop'
        ref="scroll" :pullUpText="Boolean(goodsList.length)">
      <banner :autoTime="autoTime" :list="banner"></banner>
      <a class="advert" v-if="advert" :href="advert.src">
        <img v-lazy="advert.img"/>
      </a>
      <special-list :list="specialList"></special-list>
      <div class="jx-list">
        <div class="tit">
          精选商品
        </div>
        <goodsList :list="goodsList" @goDetail="goDetail"></goodsList>
        <div class="list-loading" v-show="!goodsList.length">
          <loading></loading>
        </div>
      </div>
    </scroll>
    <transition name="slider">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
import { Toast } from 'mint-ui';
import scroll from '@/components/scroll/scroll'
import server from '@/api/server/index'

import headerM from '@/components/header/header-m';
import mNav from '@/components/nav/nav';
import banner from '@/components/banner/banner';
import goodsList from '@/components/goods-list/goods-list';
import specialList from '@/components/special-list/special-list';
import loading from '@/components/loading/loading';

export default {
	name:'keepAlive',
  data() {
    return {
      pullUpLoad: true, // 是否可以上拉加载
      pullDownRefresh: true, // 是否可以下拉加载
      autoTime: 4000,
      banner: [],
      advert: null,
      page: 1,
      nav: [],
      specialList: [],
      goodsList: []
    };
  },
  methods: {
    // 下拉触发
    loadTop() {
      this.loadTopStatus = true;
      this.__init();
    },
    // 上拉触发
    loadMore() {
      let params = {};
      this.page ++;
      params.page = this.page;
      this.__goodList(params,(rs)=>{
        let newGoodsList = [];
        newGoodsList = this.goodsList.concat(rs.goodsList);
        this.goodsList = newGoodsList;
        if (this.count <= this.page) {
          this.$refs.scroll.closePullUp();
        } else {
          this.$refs.scroll.finishPullUp();
        }
      });
    },
    __init() {
      this.$refs.scroll.closePullUp();
      // 首页
      server.index().then((rs) => {
        this.banner = rs.banner;
        this.advert = rs.advert;
        this.nav = rs.nav;
        this.specialList = rs.specialList;
        // 判断是否下拉刷新
        this.__finishPullDown ();
      }).catch((ms) => {
        this.__finishPullDown ();
        Toast(ms);
      });
      // 商品列表
      this.__goodList(null,(rs)=>{
        this.goodsList = rs.goodsList;
        this.count = rs.count;
        this.page = 1;
        if(this.count>1){
          this.$refs.scroll.openPullUp();
        }
      });
    },
    headerClick(){
      this.$router.push({ path: 'search' })
    },
    __goodList(params,callback) {
      server.goodsList(params).then((rs) => {
        this.__finishPullDown ();
        callback(rs);
      }).catch((ms) => {
        this.__finishPullDown ();
        Toast(ms);
      });
    },
    __finishPullDown () {
      if(this.loadTopStatus){
        this.$refs.scroll.finishPullDown();
        this.loadTopStatus = false;
      }
    },
    goDetail(id){
			this.$router.push({path:`/goods/${id}`});
    }
  },
  created() {
    setTimeout(()=>{
      this.__init();
    },20);
  },
  computed: {
    // better-scroll 自动更新DOM结构
    data() {
      let data = [];
      data.push(this.banner);
      data.push(this.advert);
      data.push(this.nav);
      data.push(this.specialList);
      data.push(this.goodsList);
      return data;
    }
  },
  components: {
    headerM,
    banner,
    mNav,
    goodsList,
    specialList,
    scroll,
    loading
  }
}
</script>
<style lang="less" scoped>
  @import '../../common/less/variable';
  .home{
    .scroll{
      position: absolute;
      top: 80px;
      left: 0;
      bottom: 54px;
      width: 100%;
      overflow: hidden;
    }
    .header{
      z-index: 50;
      position: fixed;
      left: 0;
      height: 80px;
      width: 100%;
    }
    .header-h{
      height: 80px;
    }
    .advert{
      display: block;
      background-color: @color-text-w;
      img{
        width: 100%;
      }
    }
    .jx-list{
      margin-top: 10px;
      .tit{
        position: relative;
        font-size: 16px;
        font-weight: bold;
        padding: 10px 10px 10px 23px;
        &:before{
          position: absolute;
          left: 10px;
          top: 10px;
          width: 0;
          height: 15px;
          content: '';
          border-left: 5px solid @color-theme;
        }
      }
    }
  }
  .slider-enter-active, .slider-leave-active{
    transition: all 0.2s linear;
  }
  .slider-enter,.slider-leave-to{
    transform: translate3d(50%, 0, 0)
  }
</style>